<html>
<head>
<title>Jexcel - Javascript spreadsheet</title>
<meta name='author' content='Paul Hodel'>
<meta itemprop='keywords' name='keywords' content='Jexcel, jquery, javascript, excel-like, spreadsheet, HTML, jquery plugin, table, grid'>
<meta itemprop='description' property='og:description' name='description' content='Jexcel is a jquery and javascript plugin you can use to embedded an excel-like spreadsheet in your website and applications.'>
<meta property='og:title' content='Jexcel - Javascript spreadsheet plugin'>
<meta name='viewport' id="viewport" content='width=device-width,initial-scale=1,user-scalable=no' />
<meta name='format-detection' content = "telephone=yes" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="fNDemv4nALjUDIqXc7xPfHDEV24wtpD9xsEKLkTIYSk" />

<meta itemprop="name" content="jExcel - the JavaScript plugin to create a excel like embeddable spreadsheet">
<meta itemprop="image" content="http://bossanova.uk/templates/default/img/logo-jexcel.png">
<meta itemprop="url" content="http://bossanova.uk/jexcel">
<meta property="og:type" content="website">
<meta property="og:site_name" content="jExcel">
<meta property="og:url" content="http://bossanova.uk/jexcel">
<meta property="og:locale" content="en_GB">
<meta property="og:image" content="http://bossanova.uk/templates/default/img/logo-jexcel.png">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.js"></script>

<link rel="icon" href="http://bossanova.uk/templates/default/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans|Roboto|Dosis">
<link rel="stylesheet" href="http://bossanova.uk/templates/default/css/style.css" type="text/css" />

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.min.css" type="text/css" />

<script src="../dist/js/jquery.jexcel.js"></script>
<script src="../dist/js/jquery.jcalendar.js"></script>
<link rel="stylesheet" href="../dist/css/jquery.jexcel.css" type="text/css" />
<link rel="stylesheet" href="../dist/css/jquery.jcalendar.css" type="text/css" />




</head>
<body>

<div class='container'>

    <div class='row top'>

        <div class='column'><a href="http://bossanova.uk/jexcel"><img src="http://bossanova.uk/templates/default/img/logo-jexcel.png"></a></div>
        <div class='column'>

            <div id='menu'><div class='description' itemprop='description'></div><ul class='folder'><li><a href='http://bossanova.uk/jexcel'>jExcel website</a></li><li><a href='http://bossanova.uk/jexcel/docs'>Online Documentation</a></li><li><a href='index.html'>Examples</a></li></ul></div>

        </div>
        <div class='column'>

            <div id='search'></div>

        </div>
    </div>

    <div class='row content'>

        <div class='column' style='max-width:300px;padding:50px;padding-top:0px;' id='content_left'>

            <div id='content-left'>

                <ul>
                    <li onclick="window.open('creating-a-table-from-an-external-csv-file.html', '_top')"><a href="creating-a-table-from-an-external-csv-file.html" alt="Creating a web spreadsheet based on an external CSV">Remote data</a><br><span>Loading data from a CSV or JSON source</span></li>
                    <li onclick="window.open('currency-and-masking-numbers.html', '_top')"><a href="currency-and-masking-numbers.html" alt="Using currency column type and how to masking numbers">Masking and formating</a><br><span>How to mask or format a cell content</span></li>
                    <li onclick="window.open('including-formulas-on-your-spreadsheet.html', '_top')"><a href="including-formulas-on-your-spreadsheet.html" alt="Basic usage of formulas">Formulas</a><br><span>How to use formula in your table</span></li>
                    <li onclick="window.open('using-a-calendar-column-type.html', '_top')"><a href="using-a-calendar-column-type.html" alt="Calendar column type with date and datetime picker">Calendar picker</a><br><span>Date and datetime picker extensions</span></li>
                    <li onclick="window.open('sorting-data.html', '_top')"><a href="sorting-data.html" alt="Sorting your grid">Sorting</a><br><span>Learn the different ways to sort a table</span></li>
                    <li onclick="window.open('integrating-a-third-party-plugin-into-your-spreadsheet.html', '_top')"><a href="integrating-a-third-party-plugin-into-your-spreadsheet.html" alt="Custom column and integrating plugins on your table">Create custom cells</a><br><span>Integrate third party plugins </span></li>
                    <li onclick="window.open('working-with-dropdowns.html', '_top')"><a href="working-with-dropdowns.html" alt="Advanced dropdown column type">Advanced dropdown</a><br><span>How to use dropdown examples</span></li>
                    <li onclick="window.open('autocomplete.html', '_top')"><a href="autocomplete.html" alt="Autocomplete column">Autocomplete column</a><br><span>Native autocomplete comlumn type</span></li>
                    <li onclick="window.open('tracking-changes-on-the-spreadsheet.html', '_top')"><a href="tracking-changes-on-the-spreadsheet.html" alt="Events">Handling events</a><br><span>Integrating your table via callbacks</span></li>
                    <li onclick="window.open('readonly-options.html', '_top')"><a href="readonly-options.html" alt="Handling readonly column and cells on your spreadsheet">Readonly options</a><br><span>Working with readonly cells</span></li>
                    <li onclick="window.open('multiple-spreadsheets-in-the-same-page.html', '_top')"><a href="multiple-spreadsheets-in-the-same-page.html" alt="Create multiple instances in the same page">Multiple instances</a><br><span>Using multiple tables in the same application</span></li>
                    <li onclick="window.open('text-wrapping.html', '_top')"><a href="text-wrapping.html" alt="Wrapping compatibility">Wrapping compatibility</a><br><span>Wrapping the text in a column</span></li>
                    <li onclick="window.open('headers.html', '_top')"><a href="headers.html" alt="Nested Headers">Nested headers</a><br><span>Nested headers</span></li>
                </ul>

            </div>
        </div>
        <div class='column' style='margin-right:60px;min-width:280px;max-width:780px;text-align:justify;'>

            <div id='content'>

<div class='title'>Working with dropdowns</div>

<p>jExcel is very flexible working with dropdowns and autocomplete columns. Several features are available, such as:</p>

<ul>
    <li>Create a simple dropdown from array</li>
    <li>Value or key-value selectbox is available</li>
    <li>Populate a dropdown from a external JSON request</li>
    <li>Autocomplete dropdown</li>
    <li>Dynamic autocomplete search based on another column value</li>
    <li>Conditional dropdowns: options from a dropdown based on a method return</li>
</ul>

<br>

<div id="my"></div>

<script>
data = [
    [3, 'Cheese'],
    [1, 'Apples'],
    [2, 'Carrots'],
    [1, 'Oranges'],
];

dropdown = function(instance, cell, c, r, source) {
    var value = $('#my').jexcel('getValue', c-1 + '-' + r);

    if (value == 1) {
        return ['Apples','Bananas','Oranges'];
    } else if (value == 2) {
        return ['Carrots'];
    } else {
        return source;
    }
}

$('#my').jexcel({
    data:data,
    colHeaders: ['Model','Color', 'Buy'],
    colWidths: [ 300, 80, 100 ],
    columns: [
        { type: 'dropdown', source:[
            {'id':'1', 'name':'Fruits'},
            {'id':'2', 'name':'Legumes'},
            {'id':'3', 'name':'General Food'},
        ] },
        { type: 'dropdown',
            source:['Apples','Bananas','Carrots','Oranges','Cheese'],
            filter:dropdown
        },
        { type: 'checkbox' },
    ]
});
</script>

<br>

<h2>Multiple select dropdown</h2>

<p>jExcel is very flexible working with third party plugins. You can create the following structure to create rich and custom column types.</p>


<div id="my1"></div>

<script>
var choiserEditor = {
        // Methods
        closeEditor : function(cell, save) {
            // Get value
            var value = $(cell).find('.editor').spectrum('get').toHexString();

            // Set visual value
            $(cell).html(value);
            $(cell).css('color', value);

            // Close edition
            $(cell).removeClass('edition');
        },
        openEditor : function(cell) {
            var main = this;
            // Get current content
            var html = $(cell).html();

            // Basic editor
            var editor = document.createElement('select');
            $(editor).html('<option>asdfasdf</option><option>qwqwer</option>');
            $(editor).prop('class', 'editor');
            $(cell).html(editor);
            $(editor).chosen();
        },
        getValue : function(cell) {
            return $(cell).html();
        },
        setValue : function(cell, value) {
            $(cell).html(value);
            $(cell).css('color', value);
            return true;
        }
    }
    
data = [
    [3, '1 2 3'],
    [1, '1'],
    [2, '1 3'],
    [1, '2 4'],
];

$('#my1').jexcel({
    data:data,
    colHeaders: ['Country', 'Foods'],
    colWidths: [ 200, 600 ],
    columns: [
        { type: 'dropdown', source: [ {'id':'1', 'name':'Canada'}, {'id':'2', 'name':'United States'}, {'id':'3', 'name':'Brazil'}, ] },
        { type: 'multiple', source: [ {'id':'1', 'name':'Carrots'}, {'id':'2', 'name':'Cheese'}, {'id':'3', 'name':'Eggs'}, {'id':'4', 'name':'Meat'} ] },
    ]
});
</script>
            </div>
        </div>
    </div>

</div>

</body>
</html>